<template>
    <div class="myconn">
        <button @click="changeCount(2)">+</button>
        {{mess}}
        <button @click="toparent()">++</button>
        <br>
        child:{{num}}
        <span v-for="(item,i) in article">{{item}}</span>
    </div>
</template>

<script>
    export default {
        name: "MyConn",
        props: {
            article: {type: Array}
        },
        data() {
            return {
                mess: 'this is main test',
                num: 0,
            }
        },
        beforeUnmount() {
            console.log('unmount conn');
        },
        unmounted() {
            console.log('unmounted conn');
        },
        activated() {
            console.log('unmount conn with keep-alive');
        },
        deactivated() {
            console.log('unmounted conn with keep-alive');
        },
        methods: {
            changeCount(num) {
                this.$emit('mycountevent', num)
            },
            toparent() {
                this.$parent.change();
                this.$root.appmet();
            },
            changeNum() {
                this.num++;
            }
        },
    }
</script>

<style scoped>
    .myconn {
        width: 60%;
        height: 40%;
        background: aqua;
        margin: 10px;
    }
</style>